function shop_header() {
    // 页头
    let icon2_a = $('.icon2_a')
    let icon2_b = $('.icon2_b')
    let icon2_c = $('.icon2_c')
    let icon2_a1 = $('.icon2_a1')
    let icon2_b1 = $('.icon2_b1')
    let icon2_c1 = $('.icon2_c1')

    // 微博二维码
    icon2_a.on('mouseover', function() {
        icon2_a1.show()
        $(this).addClass('icon2_current')


    })
    icon2_a.on('mouseout', function() {
        icon2_a1.hide()
        $(this).removeClass('icon2_current')

    })

    //微信二维码 
    icon2_b.on('mouseover', function() {
        icon2_b1.show()
        $(this).addClass('icon_current')
    })
    icon2_b.on('mouseout', function() {
        icon2_b1.hide()
        $(this).removeClass('icon_current')
    })

    // 手机二维码
    icon2_c.on('mouseover', function() {
        icon2_c1.show()
        $(this).addClass('icon3_current')
    })
    icon2_c.on('mouseout', function() {
        icon2_c1.hide()
        $(this).removeClass('icon3_current')
    })

    // 三级联动
    $('.city').on('mouseover', function() {
        $('.ICityList').show();
        $('.city').addClass('current');
        $('.city_l p').addClass('up')
        $('.ICityList').removeClass('none')

    })

    $('.city').on('mouseout', function() {
        $('.ICityList').hide()
        $('.city').removeClass('current');
        $('.city_l p').removeClass('up')
        $('.ICityList').addClass('none')
    })
    $('.city_select a').on('click', function() {
        $('.city_select a').removeClass("current")
        $(this).addClass('current')
        $(".city_l strong").text($(this).text())
    })
}

// 商品分类
function shop_list() {
    // let num = -180;

    $('.menu_list .dog_l').each(function(index, el) {
        $('.menu_list .dog_l').eq(index).on('mouseover', function() {
            $('.dog_r').eq(index).show()
            $('.dog_tit span').eq(index).hide()
        })
        $('.menu_list .dog_l').eq(index).on('mouseout', function() {
            $('.dog_r').eq(index).hide()
            $('.dog_tit span').eq(index).show()
        })
    })
    $('.two_tit .prev').on('click', function() {

        $('.lone').animate({
            left: '0px'
        }, 500);
    })
    $('.two_tit .next').on('click', function() {
        // num += -180
        $('.lone').animate({
            // left: num + 'px'
            left: '-180px'
        }, 500);
    })

}

// 关键字
function search() {
    var icon = document.querySelector('.icon')
    var btn = document.querySelector('button')
    var ul = document.querySelector('.gjzfont>ul')
    var timer
    icon.onkeyup = function() {
        var text = icon.value
        clearInterval(timer)
        timer = setTimeout(() => {

            if (!text) {
                ul.innerHTML = ''
                ul.style.display = 'none';
                return
            }
            console.log(text);
            var xhr = new XMLHttpRequest()
            xhr.open('get', `http://localhost:3000/boqishop/searchWords?age=${text}`, true)
            xhr.send()
            xhr.onreadystatechange = function() {
                if (xhr.status == 200 && xhr.readyState == 4) {
                    console.log(xhr.responseText);
                    ul.innerHTML = ''

                    var data = JSON.parse(xhr.responseText)
                    if (data.code) {
                        // ul.style.display = 'none';
                        data.data.forEach((item) => {
                            ul.innerHTML += `<li>${item.title}</li>`
                        })
                        if (text) {
                            ul.style.display = 'block';
                        }
                    } else {
                        ul.innerHTML = ''

                    }
                }
            }
        }, 300)

    }
}

// 轮播 swiper
function lunbo() {
    //实例
    var mySwiper = new Swiper('.swiper-container', {
        loop: true, // 循环模式选项
        autoplay: true, //等同于以下设置

        // 如果需要分页器
        pagination: {
            el: '.swiper-pagination',
            clickable: true,

        }
    })


    //鼠标覆盖停止自动切换
    mySwiper.el.onmouseover = function() {
        mySwiper.autoplay.stop();
    }

    //鼠标离开开始自动切换
    mySwiper.el.onmouseout = function() {
        mySwiper.autoplay.start();
    }
}

// xxy
function xxy() {
    let hotShangPingBottom = $(".hot-ShangPing-Bottom")
    let hotPage = 1;

    $.ajax({
        type: 'get',
        url: 'http://localhost:3000/boqishop/hotShangPing',
        data: {
            hotPage,
        },
        dataType: 'json',
        success: function(data) {
            console.log(data);
            if (data.code) {
                let htmlStr = ''
                data.data.forEach((item) => {
                    htmlStr += `
                <div class="hot-ShangPing-Bottom-Li">
                    <dl class="first">
                        <dt>
                            <a href="javascript:;">
                                <div></div>
                                <img src="${item.picpath}" alt="">
                            </a>
                        </dt>
                        <dd>
                            <a href="javascript:;">
                                ${item.pname}
                            </a>
                        </dd>
                        <dd>
                            <span class="xxy-left">
                            ¥${item.cast}元
                            </span>
                            <span class="xxy-right">
                                已售:${item.sales}
                            </span>
                        </dd>
                    </dl>
                </div>`
                })
                hotShangPingBottom.html(htmlStr);
            }
        }
    })

    $('.hot-GengHuan').on('click', function() {
        if (hotPage > 1) {
            hotPage--
        } else {
            hotPage++
        }

        $.ajax({
            type: 'get',
            url: 'http://localhost:3000/boqishop/hotShangPing',
            data: {
                hotPage,
            },
            dataType: 'json',
            success: function(data) {
                console.log(data);
                if (data.code) {
                    let htmlStr = ''
                    data.data.forEach((item) => {
                        htmlStr += `
                    <div class="hot-ShangPing-Bottom-Li">
                        <dl class="first">
                            <dt>
                                <a href="javascript:;">
                                    <div></div>
                                    <img src="${item.picpath}" alt="">
                                </a>
                            </dt>
                            <dd>
                                <a href="javascript:;">
                                    ${item.pname}
                                </a>
                            </dd>
                            <dd>
                                <span class="xxy-left">
                                ¥${item.cast}元
                                </span>
                                <span class="xxy-right">
                                已售:${item.sales}
                                </span>
                            </dd>
                        </dl>
                    </div>`
                    })
                    hotShangPingBottom.html(htmlStr);

                }
            }
        })

    })
}
// 狗狗商品
function wmq() {

    let page = 1
    let showResult = {}
    $.ajax({
        type: 'get',
        url: 'http://localhost:3000/boqishop/dogGoods',
        data: {
            page
        },
        dataType: 'json',
        success: function(data) {
            console.log(data);
            showResult[page] = data.data
            var html = ''
            if (data.code) {
                data.data.forEach((item) => {
                    html += `<li>
                    <div class="dgbImg">
                        <a href="javascript:;">
                            <img src="${item.picpath}" alt="">
                        </a>
                    </div>
                    <div class="dgbTitle">
                        <p><a href="javascript:;">${item.title}</a></p>
                        <span class="dgPrice">￥${item.price}</span>
                        <span class="dgSale">已售${item.sales}</span>
                    </div>
                </li>`
                })
                $('.dgBody ul').html(html)
            }
        }
    })
    $('.dgNav li a').on('mouseover', function() {
        $(this).addClass('active').parent().siblings().children().removeClass('active')
        page = $(this).attr('data-type')
        if (showResult[page]) {
            var html = ''
            showResult[page].forEach((item) => {
                html += `<li>
                <div class="dgbImg">
                    <a href="javascript:;">
                        <img src="${item.picpath}" alt="">
                    </a>
                </div>
                <div class="dgbTitle">
                    <p><a href="javascript:;">${item.title}</a></p>
                    <span class="dgPrice">￥${item.price}</span>
                    <span class="dgSale">已售${item.sales}</span>
                </div>
            </li>`
            })
            $('.dgBody ul').html(html)
        } else {
            $.ajax({
                type: 'get',
                url: 'http://localhost:3000/boqishop/dogGoods',
                data: {
                    page
                },
                dataType: 'json',
                success: function(data) {
                    // console.log(data);
                    showResult[page] = data.data
                    var html = ''
                    if (data.code) {
                        data.data.forEach((item) => {
                            html += `<li>
                            <div class="dgbImg">
                                <a href="javascript:;">
                                    <img src="${item.picpath}" alt="">
                                </a>
                            </div>
                            <div class="dgbTitle">
                                <p><a href="javascript:;">${item.title}</a></p>
                                <span class="dgPrice">￥${item.price}</span>
                                <span class="dgSale">已售${item.sales}</span>
                            </div>
                        </li>`
                        })
                        $('.dgBody ul').html(html)
                    }
                }
            })
        }
    })
}
// 猫咪商品

function la() {
    function fun() {
        var cat2 = $('.cat2 div')
        var zcate1 = $('.zcate1')
        var xhr = new XMLHttpRequest()
        var out = {}
        xhr.open('get', 'http://localhost:3000/boqishop/user?tom=1', true)
        xhr.send()
        xhr.onreadystatechange = function() {
            if (xhr.readyState == 4 && xhr.status == 200) {
                var data = JSON.parse(xhr.responseText)
                    // console.log(data);

                if (data.code) {
                    // console.log(data.data);

                    out['1'] = data.data

                    console.log(out['1']);

                    var html = ''
                        // console.log(out['1']);
                    out['1'].forEach(function(item, index) {
                        html += `<ul class='zte'>
                        <img src='${item.picpath}'>
                        <p>${item.title}</p>
                        <span>${'¥'+item.price}</span>
                        <a>${'已售'+item.sales}</a>
                        </ul>`
                    })
                    zcate1.html(html)
                }
            }
        }
        cat2.each((index, item) => {
            cat2.on("mouseover", function() {
                var node = this.getAttribute('node')
                if (out[node]) {
                    var html = ''
                    out[node].forEach((item, index) => {
                        html += `<ul class='zte'>
                        <img src='${item.picpath}'>
                        <p>${item.title}</p>
                        <span>${'¥'+item.price}</span>
                        <a>${'已售'+item.sales}</a>
                        </ul>`
                    })
                    zcate1.html(html)
                } else {
                    xhr.open('get', `http://localhost:3000/boqishop/user?tom=${node}`, true)
                    xhr.send()
                    xhr.onreadystatechange = function() {
                        if (xhr.readyState == 4 && xhr.status == 200) {
                            var data = JSON.parse(xhr.responseText)
                            if (data.code) {
                                out[node] = data.data
                                var html = ''
                                out[node].forEach((item, index) => {

                                    html += `<ul class='zte'>
                                    <img src='${item.picpath}'>
                                    <p>${item.title}</p>
                                    <span>${'¥'+item.price}</span>
                                    <a>${'已售'+item.sales}</a>
                                    </ul>`
                                })
                                zcate1.html(html)
                            }
                        }
                    }
                }

            })
        })
    }

    function ous() {
        $('.cat2>div').mouseover(function() {
            $(this).addClass('catse').siblings().removeClass('catse')
                // $(this).children('a').addClass('catseae').siblings().removeClass('catseae')
        })
    }
    fun()
    ous()
}


// 小宠  sfz

function sfz() {
    let lis = document.querySelectorAll(".xiaoChong_p>a")
    let contUl = document.querySelector(".xiaoChong_a>ul")
    lis.forEach(function(item, index) {

        // item.onclick = function() {
        item.onmouseover = function() {
            for (var i = 0; i < lis.length; i++) {
                lis[i].classList.remove('yangshi_red')
                    // contUl[i].classList.remove('current')
            }
            this.classList.add('yangshi_red')
                // cont[index].classList.add('current')
        }
    });
    let tabData = {}

    //页面初始化时，自动请求手机数据
    let xhr = new XMLHttpRequest()
    xhr.open("get", "http://localhost:3000/boqishop/search?type=1", true)
    xhr.send()
    xhr.onreadystatechange = function() {
            if (xhr.readyState == 4 && xhr.status == 200) {
                let data = JSON.parse(xhr.responseText)
                if (data.code) {
                    tabData["1"] = data.data;
                    let htmlStr = ''
                    data.data.forEach((item) => {
                        htmlStr += `<li>
                        <img src="${item.picpath}" alt="">
                        <p>${item.title}</p>
                       <dl> <span>¥${item.price}</span>
                        <div>已售${item.sales}</div></dl>
                       
                        </li>`
                    })
                    contUl.innerHTML = htmlStr;
                }
            }
        }
        //单击标签，切换内容
    lis.forEach((liEl) => {
        // 
        // 
        liEl.onmouseenter = function() {
            let type = this.getAttribute("data-id") //3

            if (tabData[type]) {
                let htmlStr = ''
                tabData[type].forEach((item) => {

                    htmlStr += `<li>
                    <img src="${item.picpath}" alt="">
                    <p>${item.title}</p>
                   <dl> <span>¥${item.price}</span>
                    <div>已售${item.sales}</div></dl>
                   
                    </li>`

                })
                contUl.innerHTML = htmlStr;
            } else {
                let xhr = new XMLHttpRequest()
                xhr.open("get", `http://localhost:3000/boqishop/search?type=${type}`, true)
                console.log(222);
                xhr.send()
                xhr.onreadystatechange = function() {
                    if (xhr.readyState == 4 && xhr.status == 200) {
                        let data = JSON.parse(xhr.responseText)
                        if (data.code) {
                            tabData[type] = data.data
                            let htmlStr = ''
                            data.data.forEach((item) => {
                                htmlStr += `<li>
                                <img src="${item.picpath}" alt="">
                                <p>${item.title}</p>
                               <dl> <span>¥${item.price}</span>
                                <div>已售${item.sales}</div></dl>
                               
                                </li>`
                            })
                            contUl.innerHTML = htmlStr;
                        }
                    }
                }
            }

        }
    })


}

// 水族 hy

function hy() {
    let dog_c = $(".dog-c")
    let tabData = {}
    $.ajax({
        type: "get",
        url: "http://localhost:3000/boqishop/shuizu",
        data: {
            type: 1

        },
        datatype: "json",
        success: function(data) {
            if (data.code) {
                let htmlStr = ''
                data.data.forEach((item) => {
                    htmlStr += `
                        <div class="dog-d">
                        <ul>
                            <li>
                                <a href="#">
                                    <img src="${item.picpath}" alt="">
                                </a>
                            </li>
                        </ul>
                        <dd>
                            <a href="#">${item.title}</a>
                        </dd>
                        <dd>
                            <span class="sp">¥${item.price}</span>
                            <span class="ps">已售${item.sales}</span>
                        </dd>
                    </div>`
                })
                dog_c.html(htmlStr);
            }
        }


    })


    $(".shuizunav a").on("mouseover", function() {
        let type = $(this).attr("data-type") //3
        $(this).addClass("shuizhubot")
        $(this).siblings().removeClass("shuizhubot")

        if (tabData[type]) {
            // 有数据(以前请求过)
            let htmlStr = ''
            tabData[type].forEach((item) => {
                htmlStr += `<li>${item.proName}</li>`
            })
            contUl.innerHTML = htmlStr;
        } else {

            $.ajax({
                type: "get",
                url: "http://localhost:3000/boqishop/shuizu",
                data: {
                    type

                },
                datatype: "json",
                success: function(data) {
                    if (data.code) {
                        let htmlStr = ''
                        data.data.forEach((item) => {
                            htmlStr += `
                                <div class="dog-d">
                                <ul>
                                    <li>
                                        <a href="#">
                                            <img src="${item.picpath}" alt="">
                                        </a>
                                    </li>
                                </ul>
                                <dd>
                                    <a href="#">${item.title}</a>
                                </dd>
                                <dd>
                                    <span class="sp">¥${item.price}</span>
                                    <span class="ps">已售${item.sales}</span>
                                </dd>
                            </div>`
                        })
                        dog_c.html(htmlStr);
                    }
                }


            })
        }

    })



}

// 爬虫
function lct() {
    $('.creeper-nav').mouseover(function() {
        let html = $(this).text().trim();
        // console.log(html);
        $(this).siblings().removeClass('creeper-nav-active')
        $(this).addClass('creeper-nav-active');
        ajax(html);
    })

    function ajax(type) {

        $.ajax({
            url: 'http://localhost:3000/boqishop/creeper',
            type: 'get',
            data: {
                type: type
            },
            dataType: 'json',
            success: function(data) {
                if (data.code) {
                    let html = '';
                    data.data.forEach(function(item) {

                        html += `
                        <a href="">
                        <img src="${item.img_url}" alt="">
                            <p>${item.title}</p>
                            <span >￥${item.price}</span>
                            <span>${item.sold}</span>
                        </a>
                        `
                    })
                    $('.creeper-b-r-b').html(html);
                }
            }
        })
    }
    ajax('陆龟用品');
}


shop_header();
shop_list();
search()
lunbo();
xxy();
wmq();
la();
sfz()
hy();
lct()